<template>
	<div class="ratingselect">
		<!--评价分类-->
		<div class="rating-type  border-1px">
			<span @click="select(2,$event)" class="block positive" :class="{'active':selectTp===2}">{{desc.all}}<span class="count" :class="{'active':selectTp===2}">{{ratings.length}}</span></span>
			<span @click="select(0,$event)" class="block positive"
			      :class="{'active':selectTp===0}">{{desc.positive}}<span
					class="count">{{positives.length}}
			</span></span>
			<span @click="select(1,$event)" class="block negative"
			      :class="{'active':selectTp===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
		</div>
		<!--评价内容-->
		<div @click="toggleContent" class="switch" :class="{'on':onlyCont}">
			<i class="icon-check_circle"></i>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	const POSITIVE = 0;//正向评价
	const NEGATIVE = 1;//负面评价
	const ALL = 2;//全部评价
	export default {
	    data() {
	        return {
	            selectTp:this.selectType,
		        onlyCont:this.onlyContent
	        }
	    },
	    props:{
	        ratings:{
	            type:Array,
		        default(){
	                return [];
		        }
	        },
		    //选择类型
		    selectType :{
	            type:Number,
			    default:ALL
		    },
		    //只看有内容的评价
		    onlyContent:{
	            type:Boolean,
			    default:false
		    },
		    //描述
		    desc: {
	            type:Object,
			    default() {
	                return {
	                    all:'全部',
                        positive:'满意',
		                negative:'不满意'
	                }
			    }
		    }
	    },
		methods:{
	        select(type,event) {
	            //阻止pc触发两次事件
	            if(!event._constructed){
	                return;
	            }
	            this.selectTp = type;
	            //将子组件的事件派发到父组件
                this.$root.eventHub.$emit('ratingtype.select',type)
	        },
			toggleContent(event) {
                if(!event._constructed){
                    return;
                };
                this.onlyCont = ! this.onlyCont;
                //将子组件的事件派发到父组件
                this.$root.eventHub.$emit('content.toggle',this.onlyCont)
			}
		},
		computed: {
	        positives() {
	            return this.ratings.filter((rating) => {
	                return rating.rateType==POSITIVE;
	            })
	        },
			negatives() {
                return this.ratings.filter((rating) => {
                    return rating.rateType==NEGATIVE;
                })
			}
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin";
	
	.ratingselect
		.rating-type
			padding: 18px 0
			margin:0 18px
			border-1px(rgba(7,17,27,0.1))
			font-size:0
			.block
				display: inline-block
				padding:8px 12px
				margin-right: 8px
				border-radius:1px
				font-size: 12px
				color: rgb(77, 85, 93)
				&.active
					color: #fff
				.count
					margin-left:2px
					font-size: 8px
				&.positive
					background: rgba(0,160,220,0.2)
					&.active
						background: rgb(0,160,220)
				&.negative
					background: rgba(77, 85, 93, 0.2)
					&.active
						background: rgb(77, 85, 93)
		.switch
			padding:12px 18px
			line-height: 24px
			border-bottom:1px solid rgba(7,17,27,0.1)
			font-size: 0
			color:rgb(147,153,159)
			&.on
				.icon-check_circle
					color: #00c850
			.icon-check_circle
				display: inline-block
				vertical-align :top
				margin-right: 4px
				font-size: 24px
			.text
				display: inline-block
				vertical-align :top
				font-size: 12px
</style>